import React, { useState } from 'react'
import { Form, Input, Button, message,  } from 'antd';
import { UserOutlined, LockOutlined, MobileOutlined,IdcardOutlined } from '@ant-design/icons';
import { Link, useNavigate } from 'react-router-dom'
import logoImg from '@/assets/img/logo.png'
import '@/assets/less/register.less'
import { registerApi } from '@/request/index'
function Register() {
  const key = 'updatable';
  const [load,setLoad] = useState(false)
  const navigate = useNavigate()

  const onFinish = (values) => {
    setLoad(true)
    const registerForm = {
      id:'',
      username: values.username,
      password: values.password,
      id_card: values.id_card,
      phone:   values.phone,
    }
    registerApi(registerForm).then(res=>{
      if(res.data.count===0){  
        message.loading({
          content: 'Loading...',
          key,
        });
        setTimeout(() => {
          message.success({
            content: '注册成功,请登录！！',
            key,
            duration: 2,
          });
          navigate("/login")
        }, 1000);
      }else{
        message.warning('该用户已存在！');
        setTimeout(() => {
          setLoad(false)
        }, 1000);
      }
    })

  };

  return (
    <div className="register">
      <div className='register_box'>
        <img src={logoImg} alt="" /><span className='register-form-text'>欢迎加入</span>
        <div className='register-content'>
          <Form
            name="basic"
            initialValues={{
              remember: true,
            }}
            onFinish={onFinish}
            autoComplete="off"
          >
            <Form.Item
              name="username"
              rules={[
                {
                  required: true,
                  message: '请输入用户名！',
                },
              ]}
            >
              <Input className='register-input' style={{ backgroundColor: 'transparent', border: "none" }} size="large" prefix={<UserOutlined style={{ color: "#fff" }} />} placeholder="请输入用户名" />
            </Form.Item>
            <Form.Item
              name="id_card"
              rules={[
                {
                  required: true,
                  message: '请输入身份证号！',
                },
              ]}
            >
              <Input className='register-input' style={{ backgroundColor: 'transparent', border: "none" }} size="large" prefix={<IdcardOutlined style={{ color: "#fff" }} />} placeholder="请输入身份证号" />
            </Form.Item>
            <Form.Item
              name="phone"
              rules={[
                {
                  required: true,
                  message: '请输入电话号！',
                },
              ]}
            >
              <Input className='register-input' style={{ backgroundColor: 'transparent', border: "none" }} size="large" prefix={< MobileOutlined style={{ color: "#fff" }} />} placeholder="请输入电话号" />
            </Form.Item>
            <Form.Item>
            <Form.Item
              name="password"
              rules={[
                {
                  required: true,
                  message: '请输入密码！',
                },
              ]}
            >
              <Input.Password className='register-input' style={{ backgroundColor: 'transparent', border: "none" }} size="large" prefix={<LockOutlined style={{ color: "#fff" }} />} placeholder="请输入密码" />
            </Form.Item>

            <Form.Item
              name="confirm"
              dependencies={['password']}
              hasFeedback
              rules={[
                {
                  required: true,
                  message: '请再次确认密码！',
                },
                ({ getFieldValue }) => ({
                  validator(_, value) {
                    if (!value || getFieldValue('password') === value) {
                      return Promise.resolve();
                    }
                    return Promise.reject(new Error('请输入相同密码！'));
                  },
                }),
              ]}
            >
              <Input.Password className='register-input' style={{ backgroundColor: 'transparent', border: "none" }} size="large" prefix={<LockOutlined style={{ color: "#fff" }} />} placeholder="请再次确认密码" />
            </Form.Item>
          
              <Link to="/login">已有账号？前往登录</Link>
            </Form.Item>

            <Form.Item>
              <Button size='large' type="primary" htmlType="submit" block  loading={load}>立即注册</Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  )
}

export default Register
